<template>
  <FixedRightBox ref="fixedRightBox">
    <div class="custom-export-filter">
      <el-form label-width="80px">
        <h3 class="export-title">导出设置</h3>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            :picker-options="pickerOptions2"
            placeholder="选择时间范围"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道ID">
          <el-select
          v-model="channel_id"
          remote
          filterable
          placeholder="请输入渠道"
          :loading="loading"
          :remote-method="$getChannels"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button @click="clearChannel">清除</el-button>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="mobile_num"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input placeholder="请输入客户名称" v-model="parent_name"></el-input>
        </el-form-item>
        <el-form-item label="海报ID">
          <el-input placeholder="请输入海报ID" v-model="poster_id"></el-input>
        </el-form-item>
        <el-form-item label="来源ID">
          <el-input placeholder="请输入来源ID" v-model="source_id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="this.hasValue !== true" disabled type="primary">导出</el-button>
          <el-button v-if="this.hasValue === true"  type="primary" @click="confirmExport">导出</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </FixedRightBox>
</template>
<script>
  var dateFormat = require('dateformat')
  import FixedRightBox from 'components/FixedRightBox'
  import { Form, FormItem, DatePicker, Input, Select, Option, Button, Loading } from 'element-ui'
  import { mapActions } from 'vuex'
  export default {
    methods: {
      $getChannels () {
        this.loading = true
        this.getChannels().then((response) => {
          this.loading = false
          console.log(response)
          if (response.data.errcode === 0) {
            const options = []
            response.data.results.forEach((channel) => {
              options.push({
                value: channel.id,
                label: channel.channel_name
              })
            })
            this.options = options
          }
        }).catch(() => {
          this.loading = false
        })
      },
      clearChannel () {
        this.channel_id = ''
      },
      initValues () {
        this.hasValue = false
        for (var i in this.data) {
          if (this.data[i]) {
            this.hasValue = true
          }
        }
        console.log('hasValue', this.hasValue)
        return this.hasValue
      },
      confirmExport () {
        this.exportLoding = true
        this.loadingInstance = Loading.service({
          target: this.$refs.fixedRightBox.$el.children[0],
          customClass: 'exportLoading',
          text: '正在提交您的导出申请'
        })
        this.saveExport(this.data).then((response) => {
          this.loadingInstance.close()
          this.$emit('export', true)
        }).catch(() => {
          this.loadingInstance.close()
          this.$emit('export', true)
        })
      },
      cancel () {
        this.$emit('cancel', false)
        return true
      },
      ...mapActions({
        getChannels: 'getChannels',
        saveExport: 'saveExport'
      })
    },
    components: {
      [DatePicker.name]: DatePicker,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      [Input.name]: Input,
      [Select.name]: Select,
      [Option.name]: Option,
      [Button.name]: Button,
      FixedRightBox
    },
    watch: {
      timeRange (value) {
        if (value[0] === null) {
          this.data.begin_time = ''
          this.data.end_time = ''
        } else {
          this.data.begin_time = dateFormat(new Date(value[0]), 'yyyy-mm-dd h:MM:ss')
          this.data.end_time = dateFormat(new Date(value[1]), 'yyyy-mm-dd h:MM:ss')
        }
        this.initValues()
      },
      channel_id (value) {
        this.data.channel_id = value
        this.initValues()
      },
      source_id (value) {
        this.data.source_id = value
        this.initValues()
      },
      parent_name (value) {
        this.data.parent_name = value
        this.initValues()
      },
      poster_id (value) {
        this.data.poster_id = value
        this.initValues()
      },
      mobile_num (value) {
        this.data.mobile_num = value
        this.initValues()
      },
      begin_time (value) {
        this.data.begin_time = value
        this.initValues()
      },
      end_time (value) {
        this.data.end_time = value
        this.initValues()
      }
    },
    beforeMount () {
      this.$getChannels()
    },
    mounted () {
      // this.loadingInstance = Loading.service({
      //   target: this.$refs.fixedRightBox.$el.children[0],
      //   customClass: 'exportLoading',
      //   text: '正在提交您的导出申请'
      // })
    },
    data () {
      return {
        channel_id: '',
        source_id: '',
        parent_name: '',
        poster_id: '',
        mobile_num: '',
        begin_time: '',
        end_time: '',
        data: {
        },
        hasValue: false,
        loading: false,
        timeRange: '',
        options: [],
        customClass: 'partloading',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    }
  }
</script>
<style lang="scss">
  .export-title {
    font-size: 16px;
  }
</style>
